<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 格式化工具</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>JSON 格式化工具</h1>
            <div class="header-controls">
                <div class="theme-toggle">
                    <input type="checkbox" id="theme-switch" class="theme-switch">
                    <label for="theme-switch" class="theme-switch-label">
                        <i class="fas fa-sun"></i>
                        <i class="fas fa-moon"></i>
                        <span class="slider"></span>
                    </label>
                </div>
                <div class="share-button" id="share-button" title="分享给朋友">
                    <i class="fas fa-share-alt"></i>
                    <span>分享</span>
                </div>
            </div>
        </header>
        
        <div class="tools-navigation">
            <a href="index.html" class="tool-link current" style="background-color: var(--primary-color);">
                <i class="fas fa-code"></i> JSON 格式化
            </a>
            <a href="excel.html" class="tool-link" style="background-color: var(--secondary-color);">
                <i class="fas fa-file-excel"></i> JSON 转 Excel/CSV
            </a>
            <a href="jsonxml.html" class="tool-link" style="background-color: var(--xml-color);">
                <i class="fas fa-exchange-alt"></i> JSON 与 XML 转换
            </a>
            <a href="parser.html" class="tool-link" style="background-color: var(--validator-color);">
                <i class="fas fa-check-circle"></i> JSON 格式校验
            </a>
            <a href="../coding/index.html" class="tool-link" style="background-color: var(--error-color);">
                <i class="fas fa-check-circle"></i> 编码转换工具
            </a>
        </div>
        
        <div id="privacy-notice" class="privacy-notice">
            <div class="privacy-notice-content">
                <i class="fas fa-shield-alt"></i>
                <p>安全提示：您的数据仅在本地浏览器中处理，不会上传到服务器，请放心使用！</p>
                <button id="close-notice" class="close-notice" title="关闭提示">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        
        <main>
            <div class="editor-container">
                <div class="input-section">
                    <h2>输入 JSON</h2>
                    <textarea id="json-input" placeholder="在此粘贴您的 JSON 数据..."></textarea>
                    <div class="button-group">
                        <button id="format-btn">格式化</button>
                        <button id="clear-btn">清空</button>
                    </div>
                    <div id="error-message" class="error-message"></div>
                </div>
                
                <div class="output-section">
                    <div class="output-header">
                        <h2>格式化结果</h2>
                        <div class="output-buttons">
                            <button id="copy-btn" class="copy-btn" title="复制到剪贴板">
                                <i class="fas fa-copy"></i> 复制
                            </button>
                            <button id="edit-btn" class="edit-btn" title="编辑内容">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                        </div>
                    </div>
                    <pre id="json-output"></pre>
                    <div class="edit-actions" style="display: none;">
                        <button id="save-btn" class="save-btn">
                            <i class="fas fa-save"></i> 保存
                        </button>
                        <button id="cancel-btn" class="cancel-btn">
                            <i class="fas fa-times"></i> 取消
                        </button>
                    </div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>©2025 JSON 格式化工具</p>
        </footer>
    </div>
    
    <div id="copy-notification" class="copy-notification">已复制到剪贴板！</div>
    <div id="share-notification" class="copy-notification">已复制网址，赶快让更多的小伙伴知道我吧！</div>
    
    <script src="script.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?3615c6485313357fe26e486bf42d9ec2";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>
</html>